/*
 * @LastEditors: 七七
 * @Date: 2023-01-08 17:57:07
 */
import React, { Component } from 'react'
import { connect } from 'react-redux';
import { nanoid } from 'nanoid';
import { creteAddPersonAction } from '../../redux/actions/person'

class Person extends Component {

  addPerson = () => {
    const name = this.nameNode.value
    const age = this.ageNode.value * 1
    const personObj = { id: nanoid(), name, age }
    this.props.jiayiren(personObj)
    this.nameNode.value = '';
    this.ageNode.value = '';
  }

  render() {
    // console.log('person props', this.props);
    return (
      <div>
        <h2>我是Person组件，上方组件求和为：{this.props.he}</h2>
        <input ref={c => this.nameNode = c} type="text" placeholder='输入名字' />
        <input ref={c => this.ageNode = c} type="text" placeholder='输入年龄' />
        <button onClick={this.addPerson}>添加</button>
        <ul>
          {
            this.props.yiduiren.map(p => {
              return <li key={p.id}>名字{p.name}--年龄{p.age}</li>
            })
          }
        </ul>
      </div>
    )
  }
}

export default connect(
  state => ({ yiduiren: state.rens, he: state.he }),
  { jiayiren: creteAddPersonAction }
)(Person)